import * as THREE from 'three';
// console.log(THREE);


// 引入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 引入动画库
import  gsap from 'gsap';
import { Camera, Light, LoadingManager } from 'three';

//  1.创建场景
const scene = new THREE.Scene()

//  2.创建并添加相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)  //创建相机
camera.position.set(0,0,10) //设置相机位置
scene.add(camera)//在场景中添加相机





// 14-17  材质 光照 粗糙度金属度法线贴图  加载管理器  环境贴图

// 17. 环境贴图
const cubeTextureLoader = new THREE.CubeTextureLoader();
const envMapTetxture =  cubeTextureLoader.load([
    require('../assets/imgs/textures/envMapTetxture/px.jpg'),
    require('../assets/imgs/textures/envMapTetxture/nx.jpg'),
    require('../assets/imgs/textures/envMapTetxture/py.jpg'),
    require('../assets/imgs/textures/envMapTetxture/ny.jpg'),
    require('../assets/imgs/textures/envMapTetxture/pz.jpg'),
    require('../assets/imgs/textures/envMapTetxture/nz.jpg'),
])

const spherGeometry = new THREE.SphereBufferGeometry(1,20,20);
const material = new THREE.MeshStandardMaterial({
    metalness:0.7,//15.3 金属度  0-1 数值越小越不像金属
    roughness:0.1,//15.2 粗糙度  0-1 数值越小越光滑
    envMap:envMapTetxture,//17.1  物体环境贴图
});

//17.2   给场景添加背景
scene.background = envMapTetxture;
//17.3   给场景所有物体添加默认的环境贴图
scene.environment = envMapTetxture;
//17.4   HDR环境图片加载
// import { RGBE } from "three/examples/jsm/loaders/RGBELoader";

const sphere = new THREE.Mesh( spherGeometry, material );// 将几何体和材质组合为物体
scene.add( sphere );//在场景中添加物体



// 添加物体
// const cubeGeometry = new THREE.BoxBufferGeometry(1,1,1)
// 16 设置加载管理器LoadingManager   跟踪已加载和待加载的数据
// let event = {}
// event.onLoad = function(){
//     console.log('所有资源图片加载完成') 
// }
// event.onProgress = function(url,num,total){
//     console.log(url+'加载完成')
//     console.log('加载进度：'+num)
//     console.log('资源总数：'+total)
//     console.log('加载进度百分比：'+(num/total*100).toFixed(2)+'%')
// }
// event.onError = function(e){
//     console.log(e)
//     console.log('图片加载错误')
// }
// const loadingManager = new THREE.LoadingManager(
//     event.onLoad,event.onProgress,event.onError
// );

// 14 纹理与材质   纹理常用属性 显示算法 纹理材质的透明
// 导入纹理 通过图片加载
// const textureLoader = new THREE.TextureLoader(loadingManager);
// const wenliColorTexture = textureLoader.load(require('../assets/imgs/textures/123.png'));//纹理加载器
// const BasicMaterial = new THREE.MeshBasicMaterial({//基础材质 MeshBasicMaterial


// 15.1 标准物理网格材质 MeshStandardMaterial  🔺需要灯光和表面属性
// const material = new THREE.MeshStandardMaterial({
    // map:wenliColorTexture,
    // color:'#62b5eb',
    // roughness:0,//15.2 粗糙度  0-1 数值越小越光滑
    // roughnessMap:0,//粗糙度贴图  暂无资源
    // metalness:1,//15.3 金属度  0-1 数值越小越不像金属
    // metalnessMap:0,//金属度贴图  暂无资源
// })
// const cube = new THREE.Mesh( cubeGeometry, material );// 将几何体和材质组合为物体
// scene.add( cube );//在场景中添加物体

// 15.1 设置灯光
// 环境光(颜色 强度)
const light = new THREE.AmbientLight(0XFFFFFF,5);
// 直线平行光(颜色 强度 位置)
// const directionLight = new THREE.DirectionalLight(0XFFFFFF,5);
// directionLight.position.set(10,10,10) 
scene.add( light );







//  4.设置渲染器并渲染场景
const renderer = new THREE.WebGL1Renderer() //初始化渲染器
renderer.setSize(window.innerWidth,window.innerHeight)  //设置渲染的尺寸大小
document.body.appendChild(renderer.domElement);// 将webgl渲染的内容添加到body
// renderer.render(scene,camera) // 使用渲染器，通过相机将场景渲染进来 


// 5.添加辅助坐标轴
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// 6.添加控制器-轨道控制器 可以使得相机围绕目标进行轨道运动  通过不断地重新渲染来实现移动视角的效果
const controls = new OrbitControls(camera,renderer.domElement);
// 10.设置控制器阻尼 更真实  需要在每一帧重新生成时调用controls.update();
controls.enableDamping = true;



window.addEventListener("dblclick",()=>{//双击屏幕全屏/取消全屏
    document.fullscreenElement?document.exitFullscreen():renderer.domElement.requestFullscreen()
})

function render(){//递归实现每一帧的重新渲染
    //  8.制作动画  ——  时间动画原理(通过每一帧的生成时间为基准来渲染动画  clock函数或render自带时间参数)  较简单 略...  
    renderer.render(scene,camera)
    requestAnimationFrame(render);
    controls.update();
}
render();

// 11.监听画面变化渲染画面  
window.addEventListener('resize',()=>{
    camera.aspect = window.innerWidth/window.innerHeight//更新相机
    camera.updateProjectionMatrix();//更新相机投影矩阵
    renderer.setSize(window.innerWidth,window.innerHeight)//更新渲染器尺寸大小
    renderer.setPixelRatio(window.devicePixelRatio)//设置渲染器像素比————就是缩放比
})